<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h3>{{msg}}</h3>
    <h4>{{say()}}</h4>
    <h4>{{say1()}}</h4>
    <h4>{{say2()}}</h4>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hi vuejs',
      },
      // methods 选项的作用是，声明在vue实例中需要使用的函数
      methods: {
        // 声明函数：提供给vm使用，也可以提供给视图使用。
        // 传统写法
        say: function () {
          return '你好'
        },
        // 简写写法
        say1 () {
          return '你好1 ' + this.msg  // this === vm 就是vue实例
        },
        // 箭头函数
        say2: () => {
          // 注意：在vue的methods中不建议使用箭头函数
          // 原因：箭头还是没有this,使用外层代码的this,此时外层代码是window
          return '你好2 ' + this.msg
        }
      }
    })
  </script>
</body>
</html>